
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/app/ute/model/device_info.dart';
import 'package:share_fit/app/ute/uteped_device.dart';
import 'package:share_fit/generated/locales.g.dart';
import 'package:sprintf/sprintf.dart';

import 'device_unbind_logic.dart';

class DeviceUnbindPage extends StatelessWidget {
  DeviceUnbindPage({super.key});

  final logic = Get.put(DeviceUnbindLogic());
  final state = Get.find<DeviceUnbindLogic>().state;

  @override
  Widget build(BuildContext context) {
    // state.deviceList = Get.arguments;
    return Scaffold(
      appBar: AppBar(
        title: Text(LocaleKeys.device.ts, style: TextStyle(fontSize: 54.sp)),
        centerTitle: true,
        leading: BackBtnIcon(onTap: () => Get.back()),
      ),
      body: Center(
        child: Padding(
          padding: EdgeInsets.only(left: 43.w, top: 62.h, right: 42.w),
          child: Column(
            children: [
              Container(
                height: 588.w,
                padding: EdgeInsets.only(right: 34.w),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    image: const DecorationImage(
                        fit: BoxFit.cover,
                        image: AssetImage(
                            'assets/images/device/device_unbind.png'))),
                child: Padding(
                  padding: EdgeInsets.only(left: 451.w),
                  child: Row(
                    children: [
                      SizedBox(width: 43.w),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          SizedBox(height: 110.h),
                          Text(
                              sprintf(LocaleKeys.device_smart_watch.ts,
                                  [state.name]),
                              style: TextStyle(
                                  fontSize: 50.sp, color: Colors.black)),
                          SizedBox(height: 60.h),
                          Text(
                              sprintf(LocaleKeys.device_mac_address.ts,
                                  [state.address]),
                              style: TextStyle(
                                  fontSize: 36.sp, color: Colors.grey)),
                          Text(
                            sprintf(LocaleKeys.device_battery_level.ts,
                                [state.battery.value]),
                            style: TextStyle(
                              fontSize: 36.sp,
                            ),
                          ),
                          SizedBox(height: 70.h),
                          Container(
                            width: 480.w,
                            height: 20.h,
                            padding: EdgeInsets.only(right: 32.w),
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(5),
                              child: LinearProgressIndicator(
                                backgroundColor: Colors.grey,
                                valueColor: const AlwaysStoppedAnimation(
                                    Color(0xFF00CFFF)),
                                value: state.percent.value,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
              SizedBox(height: 62.h),
              Expanded(child: Container(
                  child: GetBuilder<DeviceUnbindLogic>(
                    id: "device_list",
                    init: logic,
                    builder: (DeviceUnbindLogic controller) {
                      if (state.supportMultiple) {
                        return ListView.separated(
                            itemBuilder: (context, index) {
                              return _buildListItem(
                                  context, state.deviceList[index]);
                            },
                            separatorBuilder:
                                (BuildContext context, int index) => Divider(
                              height: 39.h,
                              color: Colors.transparent,
                            ),
                            itemCount: state.deviceList.length);
                      } else {
                        return Container();
                      }
                    },
                  ))),
              SizedBox(height: 120.h),
              SizedBox(
                width: double.infinity,
                child: SizedBox(
                  child: CupertinoButton(
                    borderRadius: BorderRadius.circular(40.w),
                    color: ColorConst.accentColor,
                    onPressed: () {
                      if (state.supportMultiple) {
                        Get.toNamed("/device/search");
                      }
                      else {
                        showDialog(
                            context: Get.overlayContext!,
                            barrierDismissible: false,
                            builder: (BuildContext context) {
                              return _buildUnbindDialog(context, UTEPedDevice.instance.deviceInfo);
                            });
                      }
                    },
                    child: Text(
                      state.supportMultiple ? LocaleKeys.device_add_new.ts:LocaleKeys.device_unbind.ts,
                      style: const TextStyle(color: Colors.white, fontSize: 17),
                    ),
                  ),
                ),
              ),
              SizedBox(height: 80.h),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildListItem(BuildContext context, DeviceInfo item) {
    return GestureDetector(
      child: Container(
        padding: EdgeInsets.only(left: 60.w),
        decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(10))),
        child: SizedBox(
          height: 280.h,
          child: Row(
            children: [
              Padding(
                  padding: EdgeInsets.only(top: 60.h, bottom: 60.h),
                  child: Image.asset("assets/images/device/device_circle.png")),
              SizedBox(width: 60.w),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    item.model,
                    style: TextStyle(fontSize: 42.sp),
                  ),
                  Text(
                    sprintf("%s%", [item.battery]),
                    style: TextStyle(fontSize: 54.sp),
                  )
                ],
              ),
              Expanded(child: Container()),
              GetBuilder<DeviceUnbindLogic>(
                id: "right_item",
                init: logic,
                builder: (logic) {
                  if (!state.address.isNotEmpty ||
                      state.address.value == item.address || item.checked) {
                    if (item.checked) {
                      return _rightUnbindWidget(context, item);
                    } else {
                      return _rightCurrentWidget(context);
                    }
                  } else {
                    return Container(
                      padding: EdgeInsets.only(right: 40.w),
                      child: ElevatedButton(
                          style: ElevatedButton.styleFrom(
                            minimumSize: Size(202.w, 86.w),
                            backgroundColor: const Color(0xFFF2F6FC),
                          ),
                          onPressed: () {
                            logic.switchDevice(item.model, item.address);
                          },
                          child: Text(LocaleKeys.device_switch.ts,
                              style: TextStyle(
                                  color: Colors.black, fontSize: 42.sp))),
                    );
                  }
                },
              )
            ],
          ),
        ),
      ),
      onTap: () {
        logic.onConnectedDeviceTap(item);
      },
    );
  }

  Widget _rightUnbindWidget(BuildContext context, item) {
    return InkWell(
      child: Container(
        width: 175.w,
        decoration: BoxDecoration(
            color: ColorConst.accentColor,
            borderRadius: const BorderRadius.only(
                topRight: Radius.circular(10),
                bottomRight: Radius.circular(10))),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(LocaleKeys.device_unbind.ts,
                style: TextStyle(fontSize: 48.sp, color: Colors.white))
          ],
        ),
      ),
      onTap: () {
        showDialog(
            context: Get.overlayContext!,
            barrierDismissible: false,
            builder: (BuildContext context) {
              return _buildUnbindDialog(context, item);
            });
      },
    );
  }

  Widget _rightCurrentWidget(BuildContext context) {
    return Column(
      children: [
        Container(
          decoration: const BoxDecoration(
              image: DecorationImage(
                  fit: BoxFit.cover,
                  image:
                      AssetImage('assets/images/device/device_current.png'))),
          child: Stack(
            children: [
              SizedBox(width: 300.w, height: 183.w),
              Positioned(
                  top: 30.w,
                  right: 30.w,
                  child: Text(LocaleKeys.device_current.ts,
                      style: TextStyle(fontSize: 42.sp, color: Colors.white))),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildUnbindDialog(BuildContext context, DeviceInfo item) {
    return Material(
      type: MaterialType.transparency,
      child: Center(
        child: SizedBox(
          width: 916.w,
          height: 736.w,
          child: Container(
            decoration: const ShapeDecoration(
              color: Color(0xffffffff),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(20.0),
                ),
              ),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(LocaleKeys.device_unbind_title.ts,
                    style: TextStyle(fontSize: 54.sp)),
                SizedBox(height: 97.h),
                Image.asset('assets/images/device/device_unbind_icon.png',
                    width: 184.w, height: 204.h),
                SizedBox(height: 126.h),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    ElevatedButton(
                      style: ButtonStyle(
                        minimumSize:
                            MaterialStateProperty.all(Size(383.w, 136.w)),
                        backgroundColor:
                            MaterialStateProperty.all(ColorConst.dialogBtnBg),
                        foregroundColor:
                            MaterialStateProperty.resolveWith<Color>(
                          (Set<MaterialState> states) {
                            if (states.contains(MaterialState.pressed)) {
                              return ColorConst.btnFontColorPressed;
                            }
                            return ColorConst.btnFontColor;
                          },
                        ),
                        overlayColor:
                            MaterialStateProperty.all(ColorConst.accentColor),
                        shape: MaterialStateProperty.all(
                            const RoundedRectangleBorder(
                          borderRadius: BorderRadius.all(
                            Radius.circular(10.0),
                          ),
                        )),
                      ),
                      child: Text(
                        LocaleKeys.ok.ts,
                        style: TextStyle(fontSize: 42.sp),
                      ),
                      onPressed: () {
                        Navigator.pop(context);
                        logic.unbindDevice(item.address);
                      },
                    ),
                    SizedBox(width: 39.w),
                    ElevatedButton(
                      style: ButtonStyle(
                        minimumSize:
                            MaterialStateProperty.all(Size(383.w, 136.w)),
                        backgroundColor:
                            MaterialStateProperty.all(ColorConst.dialogBtnBg),
                        foregroundColor:
                            MaterialStateProperty.resolveWith<Color>(
                          (Set<MaterialState> states) {
                            if (states.contains(MaterialState.pressed)) {
                              return ColorConst.btnFontColorPressed;
                            }
                            return ColorConst.btnFontColor;
                          },
                        ),
                        overlayColor:
                            MaterialStateProperty.all(ColorConst.accentColor),
                        shape: MaterialStateProperty.all(
                            const RoundedRectangleBorder(
                          borderRadius: BorderRadius.all(
                            Radius.circular(10.0),
                          ),
                        )),
                      ),
                      child: Text(
                        LocaleKeys.cancel.ts,
                        style: TextStyle(
                            color: ColorConst.btnFontColor, fontSize: 42.sp),
                      ),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}
